<template>
	<view class="list-box">
			<!-- 一大类列表 -->
			<view class="list" v-for="(item, index) in list" :key="index">
				<view v-for="(nav, i) in item" :key="i"
					@click="clickHandler(nav)"
					class="list-item space-between center"
					:hover-class="nav.checked || nav.checked === false ? '': 'active'" 
					:hover-start-time="50"
				>
					<view class="left center">
						<text v-if="nav.icon" :class="nav.icon"></text>
						<text>{{nav.title}}</text>
					</view>
					<view class="right center">
						<text v-if="nav.text" >{{nav.text}}</text>
						<!-- 阻止调用父组件的click事件 -->
						<switch v-if="nav.checked || nav.checked === false"
							@click.stop="()=>{}" @change="clickHandler(nav)"
							:checked="nav.checked" color="#345DC2"
							/>
						<image v-if="nav.src" :src="nav.src"></image>
						<text v-if="nav.rightIcon" :class="nav.rightIcon"></text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			list:Array,
		},
		data() {
			return {
				
			}
		},
		methods: {
			clickHandler(obj){
				if(obj.page){
					//点击后跳转到目标页
					console.log('123',obj.page);
					this.navTo(obj.page,{login:obj.login})
					return
				}
				
				if(obj.event) {
					//触发绑定的事件
					this.$emit(obj.event, obj)
				}
			}
		}
	}
</script>

<style lang="scss">
.list-box{
	background-color: $mxg-color-grey;
	padding-top: 20rpx;
	.list{
		background-color: #fff;
		margin-bottom: 20rpx;
		.list-item{
			padding: 26rpx 39rpx;
			border-bottom: $mxg-underline;
		}
		.left{
			font-size: 33rpx;
			text:first-child{
				margin-right: 20rpx;
			}
		}
		.right{
			text{
				font-size: 35rpx;
				color: $mxg-text-color-grey;
				margin-left: 15rpx;
			}
			image{
				width: 120rpx;
				height: 120rpx;
				border-radius: 60rpx;
			}
			switch{
				margin-right: -10rpx;
			}
			
		}
		
		.active{
			background-color: #fafafa;
		}
	}
}	
	
</style>
